<template>
  <div>
    <div class="detail">
      {{ obj.hosname }}{{ obj.bigname }}{{ obj.depname }}
    </div>
    <div class="time">{{ obj.workDateString }}</div>
    <div class="haolist">
      <div
        class="haoma"
        :class="[currr == index ? 'cur1' : '', item.status == -1 ? 'cur2' : '']"
        v-for="(item, index) in arr"
        @click="hank(item, index)"
        :key="index"
      >
        <div class="date">{{ item.workDate }}{{ item.dayOfWeek }}</div>
        <div class="haonum">
          <span v-if="item.status == '-1'">停止挂号</span>
          <span v-else>有号({{ item.availableNumber }})</span>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-pagination
        layout="prev, pager, next"
        @current-change="hdnl"
        style="margin-left: 43%"
        :total="total"
      />
    </div>
    <div class="haomabiao">
      <p>上午号源</p>
      <div v-for="(item, index) in morlist" class="list1">
        <div>
          <div class="zhuren">{{ item.title }}|{{ item.docname }}</div>
          <div class="zabb">{{ item.skill }}</div>
        </div>
        <div>
          ￥{{ item.amount }}
          <el-button type="primary" @click="guahao(item)">{{
            item.availableNumber
          }}</el-button>
        </div>
      </div>
      <p>下午号源</p>
      <div v-for="(item, index) in afterlist" class="list1">
        <div>
          <div class="zhuren">{{ item.title }}|{{ item.docname }}</div>
          <div class="zabb">{{ item.skill }}</div>
        </div>
        <div>
          ￥{{ item.amount }}
          <el-button type="primary" @click="guahao(item)">{{
            item.availableNumber
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.zabb {
}
.zhuren {
  color: skyblue;
  font-weight: 900;
  margin: 10px 0px;
}
.list1 {
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
}
.haomabiao p {
  color: #7f7f7f;
  font-weight: 900;
}
.haomabiao {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.haonum {
  width: 100%;
  height: calc(100% - 30px);
  line-height: 71px;
  text-align: center;
}
.cur2 .date {
  background: #ccc;
}
.date {
  background: #8ff2ff;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.cur1 {
  transform: scale(1.1);
}
.cur2 {
  border: 1px solid #7f7f7f !important;
  color: #7f7f7f !important;
}
.haoma {
  width: 14%;
  height: 101px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid skyblue;
}
.time {
  text-align: center;
  font-weight: 900;
}
.detail {
  color: #7f7f7f;
}
.haolist {
  width: 100%;
  height: auto;
  display: flex;
  margin: 15px 0px;
  justify-content: space-around;
}
</style>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import instance from "../assets/axios";
const router = useRouter();
const total = ref(0);
const page = ref(1);
const size = ref(6);
const arr = ref([]);
const currr = ref(0);
const morlist = ref([]);
const afterlist = ref([]);
const obj = ref({});
const guahao = (e) => {
  console.log(e);
  router.push({
    path: "/guahao",
    query: {
      docId: e.id,
    },
  });
};
const hank = (e, index) => {
  currr.value = index;
  morlist.value = [];
  afterlist.value = [];
  gethaoyuan(e.workDate);
};
const hdnl = (index) => {
  page.value = index;
  currr.value = 0;
  getdata();
};
const gethaoyuan = async (e) => {
  const res = await instance.get(
    `/api/hosp/hospital/auth/findScheduleList/${router.currentRoute.value.query.hoscode}/${router.currentRoute.value.query.depcode}/${e}`
  );
  console.log(res);
  res.data.forEach((el) => {
    if (el.workTime == 0) {
      morlist.value.push(el);
    } else {
      afterlist.value.push(el);
    }
  });
};
const getdata = async () => {
  const res = await instance.get(
    `/api/hosp/hospital/auth/getBookingScheduleRule/${page.value}/${size.value}/${router.currentRoute.value.query.hoscode}/${router.currentRoute.value.query.depcode}`
  );
  console.log(res);
  arr.value = res.data.bookingScheduleList;
  obj.value = res.data.baseMap;
  total.value = res.data.total;
  gethaoyuan(res.data.bookingScheduleList[0].workDate);
};
onMounted(() => {
  getdata();
});
</script>